<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="seachStatus">
                {{$t('feedbacktime')}}
                <el-date-picker :placeholder="$t('plsset')" v-model="creationTime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
            </span>
            <span class="seachStatus">
                {{$t('sta')}}
                <el-select v-model="proFeedForm.status" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('pending')" value="PENDING"></el-option>
                    <el-option :label="$t('takenover')" value="CONFIRMED"></el-option>
                    <el-option :label="$t('inprogress')" value="PROCESSING"></el-option>
                    <el-option :label="$t('finish')" value="END"></el-option>
                </el-select>
            </span>
            <span>
                {{$t('feedbackaccount')}}
                <el-input v-model.trim="proFeedForm.appUserName" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <span class="seachCSC">
                {{$t('titl')}}
                <el-input v-model.trim="proFeedForm.content" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seach" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="proFeedTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="appUserId" min-width="161" :label="$t('userid')">
                </el-table-column>
                <el-table-column prop="appUserName" min-width="164" :label="$t('feedbackpeople')">
                </el-table-column>
                <el-table-column prop="classify" min-width="163" :label="$t('problemtype')">
                </el-table-column>
                <el-table-column prop="title" min-width="114" :label="$t('titl')">
                </el-table-column>
                <el-table-column prop="gmtCreate" min-width="165" :label="$t('feedbacktime')">
                </el-table-column>
                <el-table-column prop="status" min-width="127" :label="$t('sta')">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="getsuggestDetail(scope.row.id)">{{$t('detls')}}</el-link>
                        <el-badge value="new" class="item" v-if="(scope.row.type === 0 || scope.row.status === $t('pending')) && scope.row.status !== $t('finish')"></el-badge>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="proFeedForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="proFeedForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    getappsuggestlist
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            isOk: false,
            total: 0,
            feedDate: null,
            creationTime: null,
            proFeedForm: {
                appKind: '',
                status: '',
                appUserName: '',
                startTime: null,
                endTime: null,
                content: '',
                pageNum: 1,
                pageSize: 10
            },
            proFeedTab: []
        }
    },
    methods: {
        getproFeedList() {
            getappsuggestlist(JSON.stringify(this.proFeedForm)).then(res => {
                if (res.status === 200) {
                    this.total = res.data.total - 0
                    for (let i = 0; i <= res.data.list.length - 1; i++) {
                        let j = res.data.list[i]
                        if (j.appKind === 'MER') j.appKind = this.$t('merchant')
                        if (j.appKind === 'PSN') j.appKind = this.$t('personal')
                        if (j.status === 'PENDING') j.status = this.$t('pending')
                        if (j.status === 'END') j.status = this.$t('finish')
                        if (j.status === 'CONFIRMED') j.status = this.$t('takenover')
                        if (j.status === 'PROCESSING') j.status = this.$t('inprogress')
                        j.classify = this.getiwant(j, 0)
                        if (j.content.indexOf('title') !== -1) j.title = this.getiwant(j, 2)
                    }
                    this.proFeedTab = res.data.list
                }
            })
        },
        // 搜索
        seach() {
            if (this.creationTime != null) {
                this.proFeedForm.startTime = this.creationTime[0]
                this.proFeedForm.endTime = this.creationTime[1]
            }
            if (!this.creationTime) {
                this.proFeedForm.startTime = null
                this.proFeedForm.endTime = null
            }
            this.proFeedForm.pageNum = 1
            this.getproFeedList()
        },
        // 显示条数变动
        handleSizeChange (newSize) {
            this.proFeedForm.pageSize = newSize
            this.getproFeedList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.proFeedForm.pageNum = newNum
            this.getproFeedList()
        },
        // 详情页跳转
        getsuggestDetail (id) {
            window.sessionStorage.setItem('feedbackid', id)
            this.$router.push('/sec/feedbackdet')
        },
        // 处理content字段中的数据
        getiwant (star, num) {
            return star.content.split(',')[num].split(':')[1].split('"')[1]
        }
    },
    mounted () {
        this.getproFeedList()
    }
}
</script>

<style lang="less" scoped>
@import './feedback.less';
</style>
